<template>
  <div class="box1">
    <div class="roles">
      <!-- 头部 -->
      <div class="rolesspace">
        <el-space>
          <span style="width: 80px">角色名称：</span
          ><el-input v-model.trim="font.name" />
          <span style="width: 80px">描述信息：</span
          ><el-input v-model.trim="font.desc" />
          <el-button type="primary" @click="add()">添加</el-button>
        </el-space>
      </div>
      <!-- 表格数据 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="desc" label="说明" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              >授权</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改对话框 -->
      <el-dialog
        v-model="dialogVisible"
        title="修改"
        width="45%"
        :before-close="handleClose"
      >
        <span>角色名称：</span>
        <el-input v-model.trim="uodata.name" class="lefts" />
        <span>描述信息：</span>
        <el-input v-model.trim="uodata.desc" class="rights" />
        <el-button type="primary" @click="amend()" class="modification"
          >修改</el-button
        >
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>
      <!-- 授权对话框 -->
      <el-dialog
        v-model="dialogVisibles"
        title="授权"
        width="30%"
        :before-close="handleClose"
      >
        <!-- 树形控件 -->
        <el-tree
          :props="props"
          show-checkbox
          :data="data"
          :default-checked-keys="assignedPermissions"
          node-key="id"
          ref="tree"
        >
          <template #default="{ node, data }">
            <span class="add">
              <span>{{ node.label }}</span>
              <span v-if="!data.children">
                <div>{{ data.id }}</div>
              </span>
            </span>
          </template>
        </el-tree>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisibles = false">取消</el-button>
            <el-button type="primary" @click="sure()">确定</el-button>
          </span>
        </template>
      </el-dialog>
      <PagLnatio
        v-bind="paging"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
      ></PagLnatio>
    </div>
  </div>
</template>

<script>
import PagLnatio from "@/components/PagLnatio.vue";
import http from "@/http";
import { ElMessage as $msg } from "element-plus";
export default {
  components: {
    PagLnatio,
  },
  data() {
    return {
      tableData: [],
      data: [], //接受授权列表
      dialogVisible: false, //修改对话框
      dialogVisibles: false, //配置权限对话框
      font: {
        //添加信息
        name: "",
        desc: "",
      },
      //修改信息
      uodata: {
        name: "",
        desc: "",
      },
      paging: {
        page: 1, //默认第一页
        limit: 10, //显示几页
        total: Number,
      },
    };
  },
  created() {
    this.rele(); //创建后调用
  },
  methods: {
    //列表
    rele() {
      let data = {
        _gp: "admin.role",
        _mt: "list",
        limit: this.paging.limit,
        page: this.paging.page,
      };
      http.post(data).then((res) => {
        if (200 == res.errno) {
          this.tableData = res.data.items;
          this.paging.total = res.data.total;
        }
      });
    },
    //添加
    add() {
      if (this.font.name == "" || this.font.desc == "") {
        return $msg.error("添加信息不能为空");
      }
      let addtion = {
        _gp: "admin.role",
        _mt: "create",
        role: JSON.stringify(this.font),
      };
      http.post(addtion).then((res) => {
        console.log(res);
        if (200 == res.errno) {
          $msg.success({ message: "添加成功" });
          this.rele();
          this.font = this.$options.data().font;
        }
      });
    },
    //修改
    handleEdit(index, row) {
      this.dialogVisible = true;
      Object.assign(this.uodata, row); //桥拷贝对象
    },
    //授权
    handleDelete(index, row) {
      this.dialogVisibles = true;
      this.id = row.id;
      let authorization = {
        _gp: "admin.role",
        _mt: "permissionList",
        roleId: row.id,
      };
      http.post(authorization).then((res) => {
        console.log(res);
        if (200 == res.errno) {
          this.data = res.data.systemPermissions; //展示数据
          this.assignedPermissions = res.data.assignedPermissions; //默认展开key的数据
        }
      });
    },
    //修改按钮
    amend() {
      if (this.uodata.name == "" || this.uodata.desc == "") {
        return $msg.error("修改信息不能为空");
      }
      let addtions = {
        _gp: "admin.role",
        _mt: "update",
        role: JSON.stringify(this.uodata),
      };
      http.post(addtions).then((res) => {
        console.log(res);
        if (200 == res.errno) {
          $msg.success("修改成功!");
          this.dialogVisible = false;
          this.rele();
        }
      });
    },
    //授权按钮
    sure() {
      this.dialogVisibles = false;
      let checkedKey = this.$refs.tree.getCheckedKeys(true);
      let configuration = {
        _gp: "admin.role",
        _mt: "permissionSet",
        roleSetPermissionDTO: JSON.stringify({
          roleId: this.id,
          permissions: checkedKey,
        }),
      };
      http.post(configuration).then((res) => {
        console.log(res);
        if (200 == res.errno) {
          $msg.success({ message: "配置成功" });
          this.rele();
          // this.assignedPermissions = [];
          this.dialogVisibles = false;
        }
      });
    },
    //一页显示多少条
    handleSizeChange(val) {
      console.log(val);
      this.paging.limit = val;
      this.rele();
    },
    //改变页码
    handleCurrentChange(val) {
      this.paging.page = val;
      this.rele();
    },
  },
};
</script>

<style lang="less" scope>
.box1 {
  width: 100%;
  .roles {
    width: 98%;
    margin: auto;
    .rolesspace {
      height: 40px;
    }
  }
  .head {
    /deep/ .el-input {
      display: inline-block;
      width: 180px;
      margin-bottom: 20px;
    }
    /deep/ .el-input__inner {
      display: inline-block;
      width: 160px;
    }
    span {
      display: inline-block;
    }
  }
  /deep/ .lefts {
    width: 160px;
    display: inline-block;
  }
  /deep/ .rights {
    width: 160px;
    display: inline-block;
  }
  .modification {
    margin-left: 15px;
  }
  .add {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  //组件样式
  .dins {
    margin-top: 10px;
  }
}
</style>
